<template>
  <view>
    <!-- 顶部时间选择器 -->
    <div class="top-box">
      <div class="time-pick" @click="show = true">
        <div>2024-03-01~31</div>
        <div style="margin: 0rpx 20rpx">|</div>
        <div style="margin-top: 8rpx">
          <image
            src="../../../static/pick.png"
            mode="scaleToFill"
            style="width: 38.5rpx; height: 35.8rpx" />
        </div>
      </div>
    </div>
    <!-- 取餐表格 -->
    <div></div>
    <up-calendar :show="show" :mode="mode" @confirm="confirm"></up-calendar>
    <Tabbar v-if="mode1 == 0 ? true : false"></Tabbar>
  </view>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
import { UseTypestore } from '@/stores/index'
const store = UseTypestore()
const mode1 = computed(() => {
  return store.whichType
})
const show = ref(false)
const mode = ref('multiple')
// 确认时间选择
const confirm = (e) => {
  console.log(e)
  show.value = false
}
</script>
<style>
.time-pick {
  width: 408rpx;
  height: 64rpx;
  border-radius: 10rpx;
  border: 2rpx solid rgba(255, 99, 6, 1);
  box-sizing: border-box;
  margin: auto;
  display: flex;
  align-items: center;
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  justify-content: center;
}

page {
  background: rgba(246, 246, 246, 1);
}

.top-box {
  width: 100%;
  background-color: #fff;
  padding: 10rpx 0rpx;
}
</style>
